<template>
	<view>
		<!-- 步骤条 -->
		<view class="step">
			<uni-steps :options="option" :active="0" active-color="#00C6C2"></uni-steps> 
		</view>
		<!-- 个人身份证 -->
		<view class="verification">
			<view class="head">
				<view class="tex1">个人身份证</view>
				<view class="text2">（或其他有效身份证件）</view>
				<view class="text3">
					<text>示例照片</text><text class="icon iconfont">&#xe627;</text>
					</view>
			</view>
			<view class="id_pic">
				<view class="pic" @click="changeImg">
					<image :src="pic1==''?pic1_default:pic1"  mode=""></image>
					<view class="upface">
						<text>+ 点击上传/修改人面像</text>
					</view>
				</view>
				<view class="pic"  @click="changeImg1">
					<image :src="pic2==''?pic2_default:pic2"></image>
					<view class="upface">
						<text>+ 点击上传/修改国徽面</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 实名认证 -->
		<view style="padding: 21rpx 26rpx; background: #F3F3F3; color: #818181;font-size: 26rpx;">实名认证</view>
		<!-- 信息填写 -->
		<view class="inforPull">
			<view class="message">
				<view class="name">姓名</view>
				<view class="Input">
					<input type="text" placeholder="请输入本人姓名" v-model="form.name">
				</view>
			</view>
			<view class="message">
				<view class="name">性别</view>
				<view class="Input" style="height: 50rpx;">
					<label class="radio" >
						<radio-group name="" @change='change'>
							<radio value="男"  style="transform: scale(0.5);" /><text>男</text>	<radio value="女" style="transform: scale(0.5); " /><text>女</text>
						</radio-group>
						
					</label>
				</view>
			</view>
			<view class="message">
				<view class="name">身份证号</view>
				<view class="Input">
					<input type="text" placeholder="请输入身份证号" v-model="form.id_card">
				</view>
			</view>
			<view class="message">
				<view class="name">邮件信息</view>
				<view class="Input">
					<input type="text" placeholder="请输入邮件地址" v-model="form.email">
				</view>
			</view>
			<view class="message">
				<view class="name">手机号</view>
				<view class="Input">
					<input type="text" placeholder="请输入手机号码" v-model="form.phone">
				</view>
			</view>
			<view class="message">
				<view class="name">验证码</view>
				<view class="Input">
					<input type="text" placeholder="请输入验证码" v-model="form.code">
					
				</view>
				<view class="ph" @click="sendCode">{{sed}}</view>
			</view>
			<view class="btm-ver" >人脸验证（您的验证信息只会用于实人认证审核）</view>
			<view  class="veri" >
				<view style="width: 80%;">人脸验证</view>
				<view class="veri-1" >
					<text>去验证</text>
					<image  src="../../static/fan.png" mode=""></image>
				</view>
			</view>
			<view class="veri-2" >
				<view @click="gotos" >下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getcode,judgeVerificationCode} from '@/api/settlement.js'
	export default {
		data(){
			return {
				option:[{title:'身份认证'},{title:'职业认证'},{title:'合作协议'},{title:'结算信息'}],
				index:0,
				form:{
					name:'',
					sex:'',
					id_card:'',//身份证
					email:'',
					phone:'',
					code:'',//验证码					
				},
					pic1_default:'../../static/renzheng/sfz1.png',//人面
					pic1:'',
					pic2_default:'../../static/renzheng/sfz2.png',//国徽
					pic2:'',
					get_code:'',//后台返回的验证
					number:60,//时间倒计时
					sed:'手机验证'
			}
		},
		methods:{
			change(e){
				console.log(e)
				this.form.sex = e.detail.value
			},
			//下一步
			gotos(){
				//验证名字是否输入
				if(this.form.name==''){
					uni.showToast({
						title:'请输入名字',
						icon:'none'
					})
					return
				}
				//验证身份证
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
				if(!regIdNo.test(this.form.id_card)){ 
					uni.showToast({
						title:'请输入正确的身份证号码',
						icon:'none'
					})
				  return false; 
				}
				//验证手机
				 var re =/^1[3456789]\d{9}$/
				    if (!re.test(this.form.phone)) {
				       uni.showToast({
				       	title:'请输入正确的手机号码',
				       	icon:'none'
				       })
						return
				    } 
				//验证邮件
				var	re1 = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
				    if(!re1.test(this.form.email)){
				       uni.showToast({
				       	title:'请输入正确的邮件地址',
				       	icon:'none'
				       })
				       	return
				    }
				//验证验证码输入
				if(this.form.code ==''){
					uni.showToast({
						title:'验证码输入有误',
						icon:'none'
					})
					return
				}else{
					let data ={
						code:this.form.code,
						cmsDesignerMessage:''
					}
					//验证验证码是否过期或输入正确，如果正确 进入下一步
					judgeVerificationCode(data).then(res=>{
						console.log(res)
					})
				}

				// uni.navigateTo({
				// 	url:'./occupation'
				// })
			},
			// 上传人面
			 changeImg() {
			        uni.chooseImage({
			            success: (chooseImageRes) => {
			                const tempFilePaths = chooseImageRes.tempFilePaths;
			                this.pic1 = tempFilePaths[0] 
			                // uni.uploadFile({
			                //     url: app.apiUrl+'small/index/indexdata', //仅为示例，非真实的接口地址
			                //     filePath: tempFilePaths[0],
			                //     name: 'multipartFile',
			                //     formData: {
			                      
			                //     },
			                //     success: (res) => {
			                //         console.log(JSON.parse(res.data))
			                //         var res = JSON.parse(res.data)
			                //         if (res.status) {
			                         
			                //             uni.showToast({
			                //                 title:res.msg,
			                //                 icon:'none',
			                //                 duration:2000
			                //             })
			                //         }else {
			                //             uni.showToast({
			                //                 title:res.msg,
			                //                 icon:'none',
			                //                 duration:2000
			                //             })
			                //         }
			                //     }
			                // });
			            }
			        });
			    },
				// 上传国徽
			 changeImg1() {
				        uni.chooseImage({
				            success: (chooseImageRes) => {
				                const tempFilePaths = chooseImageRes.tempFilePaths;
				                this.pic2 = tempFilePaths[0] 
				                // uni.uploadFile({
				                //     url: app.apiUrl+'small/index/indexdata', //仅为示例，非真实的接口地址
				                //     filePath: tempFilePaths[0],
				                //     name: 'multipartFile',
				                //     formData: {
				                      
				                //     },
				                //     success: (res) => {
				                //         console.log(JSON.parse(res.data))
				                //         var res = JSON.parse(res.data)
				                //         if (res.status) {
				                         
				                //             uni.showToast({
				                //                 title:res.msg,
				                //                 icon:'none',
				                //                 duration:2000
				                //             })
				                //         }else {
				                //             uni.showToast({
				                //                 title:res.msg,
				                //                 icon:'none',
				                //                 duration:2000
				                //             })
				                //         }
				                //     }
				                // });
				            }
				        });
				    },
				//发送验证码
				sendCode(){
					//验证手机
					 var re = /^1[3456789]\d{9}$/
					
					    if (!re.test(this.form.phone)) {
					       uni.showToast({
					       	title:'请输入正确的手机号码',
					       	icon:'none'
					       })
							return
					    } else{
							if(this.number<60){
								return
							}
							
							let time = setInterval(()=>{
								this.number --
								 // console.log(this.number)
								this.sed = '剩余时间'+this.number +'s'
								if(this.number<=0){
									clearInterval(time)
									this.number = 60
									this.sed ='重新获取'
								}
							},1000)
							let data = {
								phone:this.form.phone
							}
							getcode(data).then(res=>{
								console.log(res)
								if(res[1].data.code==200){
									uni.showToast({
										title:'验证码发送成功',
										icon:'none'
									})
								}
							})
						}
				}
				
		}
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped lang="less">
	//步骤
	.step{
		padding: 47rpx 25rpx;
		background-color: white;
		margin-bottom: 14rpx;
	}
	//身份验证
	.verification{
		padding: 32rpx 25rpx;
		background-color: white;
		.head{
			display: flex;
			.text1{
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;
			}
			.text2{				
				font-size: 22rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #979797;
				line-height: 62rpx;
			}
			.text3{
				flex: auto;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #979797;
				line-height: 62rpx;
				display: flex;
				justify-content: flex-end;
				.iconfont{
					font-size: 22rpx;
				}
			}
		}
		.id_pic{
			display: flex;
			// padding: 34rpx 24rpx;
			justify-content: space-between;
			// background: #F3F3F3;
			
			border-radius: 4rpx;
			.pic{
				width: 347rpx;
				height: 234rpx;
				padding: 21rpx 22rpx;
				border: 1rpx dashed #000000;
				background: #F3F3F3;
				border-radius: 4rpx;
				margin-right: 5rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.upface{
					// width: 212rpx;
					height: 50rpx;
					background: #414141;
					opacity: 0.6;
					border-radius: 4rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: -106rpx;
					margin-top: -25rpx;
					text-align: center;
					line-height: 37rpx;
					text{						
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	//信息填写
	.inforPull{
		// 
		background: white;
		.message{
			// width: 100%;
			padding: 31rpx 26rpx;
			border-bottom: 1rpx solid #E2E2E2;
			display: flex;
			align-items: center;
			.name{
				width: 150rpx;
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #282828;
			}
			.Input{
				
				flex: auto;
				input{
					
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #979797;
				}
			}
			.ph{
				// width: 124rpx;
				padding: 10rpx 10rpx;
				// height: 44rpx;
				background: #00C6C2;
				border-radius: 4rpx;
				text-align: center;
				line-height: 44rpx;				
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.btm-ver{
			padding: 20rpx;
			color: #666;
			background-color:#F1F1F1;
			font-size: 24rpx;
		}
		.veri{
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.veri-1{
				width: 20%;
				display: flex;
				align-items: center;
				
				image{
					width: 10rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}
		.veri-2{
			padding: 30rpx;
			background-color: #F1F1F1;
			
			view{
				width: 100%;
				background-color:#00c6c2;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
	.radio{
		margin-left: -72rpx;
		
	}
	radio-group{
		transform: translateY(-50rpx);
		
	}
</style>
